<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技机械风物流查询</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#00bfff',
                        secondary: '#00ced1',
                        dark: '#0a1929',
                        light: '#e6f7ff',
                        accent: '#ff6b6b',
                        transport: '#00bfff',
                        accept: '#00ff99',
                        delivered: '#00ff00',
                        problem: '#ff6b6b'
                    },
                    fontFamily: {
                        tech: ['Orbitron', 'sans-serif']
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .glow {
                text-shadow: 0 0 10px rgba(0, 191, 255, 0.7);
            }
            .panel-border {
                border: 2px solid #00bfff;
                box-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
            }
            .mech-bg {
                background-image: linear-gradient(to right, #0a1929, #122945);
            }
            .scan-line {
                background: linear-gradient(to bottom,
                rgba(0, 191, 255, 0) 0%,
                rgba(0, 191, 255, 0.3) 50%,
                rgba(0, 191, 255, 0) 100%);
                height: 20%;
                width: 100%;
                position: absolute;
                animation: scan 2s linear infinite;
            }
            @keyframes scan {
                0% { top: -20%; }
                100% { top: 100%; }
            }
            .scan-container {
                position: relative;
                overflow: hidden;
            }
            .pulse {
                animation: pulse 2s infinite;
            }
            @keyframes pulse {
                0% { transform: scale(1); opacity: 1; }
                50% { transform: scale(1.05); opacity: 0.8; }
                100% { transform: scale(1); opacity: 1; }
            }
            .fade-in {
                animation: fadeIn 1s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            .timeline {
                position: relative;
                padding-left: 2rem;
            }
            .timeline::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 2px;
                background: linear-gradient(to bottom, #00bfff, #00ced1);
            }
            .timeline-item {
                position: relative;
                margin-bottom: 2rem;
            }
            .timeline-item::before {
                content: '';
                position: absolute;
                left: -2.35rem;
                top: 0.5rem;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: #00bfff;
                box-shadow: 0 0 10px #00bfff;
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="mech-bg min-h-screen text-light font-tech">
<div class="container mx-auto px-4 py-8">
    <!-- 头部 -->
    <header class="mb-10 text-center">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold glow mb-2">科技机械风物流查询</h1>
        <p class="text-primary text-lg">实时追踪，精准掌握物流动态</p>
    </header>

    <!-- 查询区域 -->
    <div class="panel-border rounded-lg p-6 mb-10 fade-in">
        <h2 class="text-xl font-semibold glow mb-4">物流查询</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm text-primary mb-1">运单号</label>
                <input type="text" id="expressNoInput" placeholder="输入运单号"
                       class="w-full bg-dark/50 border border-primary/50 rounded px-3 py-2 text-light focus:outline-none focus:ring-1 focus:ring-primary">
            </div>
            <div>
                <label class="block text-sm text-primary mb-1">手机号（可选）</label>
                <input type="text" id="mobileInput" placeholder="输入手机号"
                       class="w-full bg-dark/50 border border-primary/50 rounded px-3 py-2 text-light focus:outline-none focus:ring-1 focus:ring-primary">
            </div>
            <div class="flex items-end">
                <button id="queryBtn" class="w-full bg-primary/20 hover:bg-primary/40 text-primary border border-primary rounded px-4 py-2 transition-all pulse">
                    <i class="fa fa-search mr-2"></i>查询物流
                </button>
            </div>
        </div>
    </div>

    <!-- 主要物流信息 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-10">
        <!-- 左侧-基本信息 -->
        <div class="lg:col-span-1 panel-border rounded-lg p-6 scan-container fade-in">
            <div class="scan-line"></div>
            <h2 class="text-xl font-semibold glow mb-6">物流信息</h2>
            <div class="space-y-4">
                <div>
                    <div class="text-sm text-primary mb-1">物流公司</div>
                    <div class="text-lg" id="logisticsCompanyName">--</div>
                </div>
                <div>
                    <div class="text-sm text-primary mb-1">运单号</div>
                    <div class="text-lg" id="mailNo">--</div>
                </div>
                <div>
                    <div class="text-sm text-primary mb-1">最新时间</div>
                    <div class="text-lg" id="theLastTime">--</div>
                </div>
                <div>
                    <div class="text-sm text-primary mb-1">当前状态</div>
                    <div class="text-lg" id="logisticsStatusDesc">--</div>
                </div>
                <div>
                    <div class="text-sm text-primary mb-1">最新消息</div>
                    <div class="text-sm bg-dark/50 p-3 rounded" id="theLastMessage">--</div>
                </div>
            </div>
        </div>

        <!-- 右侧-物流轨迹 -->
        <div class="lg:col-span-2 panel-border rounded-lg p-6 fade-in">
            <h2 class="text-xl font-semibold glow mb-6">物流轨迹</h2>
            <div id="timelineContainer" class="timeline">
                <div class="text-center py-8" id="noData">
                    <i class="fa fa-truck text-4xl text-primary/50 mb-4"></i>
                    <p class="text-light/70">请输入运单号查询物流轨迹</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 初始化页面
    document.addEventListener('DOMContentLoaded', function () {
        // 查询按钮事件
        document.getElementById('queryBtn').addEventListener('click', function() {
            const expressNo = document.getElementById('expressNoInput').value.trim();
            const mobile = document.getElementById('mobileInput').value.trim();

            if (!expressNo) {
                alert('请输入运单号');
                return;
            }

            fetchLogisticalData(expressNo, mobile);
        });

        // 按回车键查询
        document.getElementById('expressNoInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('queryBtn').click();
            }
        });
    });

    // 获取物流数据
    function fetchLogisticalData(expressNo, mobile) {
        // 显示加载状态
        updateLoadingState(true);

        // 构造请求数据
        const requestData = {
            expressNo: expressNo,
            mobile: mobile || ""
        };

        // 发送POST请求到后端
        fetch('/logistical', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Received data:', data);

                if (data && data.success) {
                    renderLogisticalData(data.data);
                } else {
                    throw new Error(data?.msg || '获取物流数据失败');
                }

                updateLoadingState(false);
            })
            .catch(error => {
                console.error('Error fetching logistical data:', error);
                alert('获取物流数据失败，请稍后重试: ' + error.message);
                updateLoadingState(false);
            });
    }

    // 更新加载状态
    function updateLoadingState(isLoading) {
        if (isLoading) {
            document.getElementById('logisticsCompanyName').textContent = '加载中...';
            document.getElementById('mailNo').textContent = '加载中...';
            document.getElementById('theLastTime').textContent = '加载中...';
            document.getElementById('logisticsStatusDesc').textContent = '加载中...';
            document.getElementById('theLastMessage').textContent = '加载中...';
            document.getElementById('timelineContainer').innerHTML = '<div class="text-center py-8"><i class="fa fa-circle-o-notch fa-spin text-2xl text-primary"></i><p class="mt-2">加载中...</p></div>';
        }
    }

    // 渲染物流数据
    function renderLogisticalData(data) {
        if (!data) {
            document.getElementById('timelineContainer').innerHTML = '<div class="text-center py-8"><i class="fa fa-exclamation-triangle text-2xl text-accent"></i><p class="mt-2">未找到物流信息</p></div>';
            return;
        }

        // 更新基本信息
        document.getElementById('logisticsCompanyName').textContent = data.logisticsCompanyName || '--';
        document.getElementById('mailNo').textContent = data.mailNo || '--';
        document.getElementById('theLastTime').textContent = data.theLastTime || '--';
        document.getElementById('logisticsStatusDesc').textContent = data.logisticsStatusDesc || '--';
        document.getElementById('theLastMessage').textContent = data.theLastMessage || '--';

        // 更新物流轨迹
        const timelineContainer = document.getElementById('timelineContainer');
        timelineContainer.innerHTML = '';

        if (data.logisticsTraceDetailList && data.logisticsTraceDetailList.length > 0) {
            data.logisticsTraceDetailList.forEach((item, index) => {
                const statusClass = getStatusClass(item.logisticsStatus);

                const timelineItem = document.createElement('div');
                timelineItem.className = 'timeline-item fade-in';
                timelineItem.innerHTML = `
                    <div class="flex justify-between items-start mb-1">
                        <div class="text-sm ${statusClass}">${formatTime(item.timeDesc)}</div>
                        <div class="text-xs text-light/70">${item.areaName || ''}</div>
                    </div>
                    <div class="text-sm mb-2 font-semibold">${getStatusText(item.logisticsStatus)}</div>
                    <div class="text-sm bg-dark/50 p-3 rounded">${item.desc}</div>
                `;

                timelineContainer.appendChild(timelineItem);
            });
        } else {
            timelineContainer.innerHTML = '<div class="text-center py-8"><i class="fa fa-exclamation-triangle text-2xl text-accent"></i><p class="mt-2">暂无物流轨迹信息</p></div>';
        }
    }

    // 根据状态获取CSS类
    function getStatusClass(status) {
        switch(status) {
            case 'ACCEPT': return 'text-accept';
            case 'TRANSPORT': return 'text-transport';
            case 'DELIVERED': return 'text-delivered';
            case 'PROBLEM': return 'text-accent';
            default: return 'text-light';
        }
    }

    // 获取状态文本
    function getStatusText(status) {
        switch(status) {
            case 'ACCEPT': return '已收货';
            case 'TRANSPORT': return '运输中';
            case 'DELIVERED': return '已送达';
            case 'PROBLEM': return '问题件';
            default: return status;
        }
    }

    // 格式化时间
    function formatTime(timeStr) {
        if (!timeStr) return '--';
        return timeStr.replace(' ', ' | ');
    }
</script>
</body>
</html>